import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import { COLORS } from '../styles/constants';

export default function SectionHeader({ title, onMore }) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      {onMore ? (
        <Pressable onPress={onMore} hitSlop={8}>
          <Text style={styles.more}>更多</Text>
        </Pressable>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    color: COLORS.text.primary,
  },
  more: {
    fontSize: 13,
    color: COLORS.primary,
  },
});
